<template>
  <div>
    <van-tabs v-model="param.status" @click="onClick">
      <van-tab title="待发货" name="1">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <order-cell
            v-for="item in relults"
            :key="item.id"
            :item="item"
            @valueChange="orderCellChange"
            @click="onCellClick"
          >
            <template #goods>
              <van-card
                v-for="goodsitem in item.orderItemList"
                :key="goodsitem.id"
                :num="goodsitem.productQuantity"
                :price="formatMoney(goodsitem.productPrice)"
                :title="goodsitem.productName"
                :thumb="goodsitem.productPic"
              >
                <template #tags>
                  <van-tag plain type="warning">{{goodsitem.productAttr}}</van-tag>
                </template>
              </van-card>
            </template>
            <template #tags>
              <van-tag plain type="danger" v-if="item.deliveryType ==0">物流配送</van-tag>
              <van-tag plain type="danger" v-if="item.deliveryType ==1">上门自提</van-tag>
              <van-tag plain type="danger" v-if="item.deliveryType ==2">自提点自提</van-tag>
              <van-tag plain type="danger" v-if="item.deliveryType ==3">骑手派送</van-tag>
            </template>
          </order-cell>
        </van-list>
      </van-tab>
      <van-tab title="已发货" name="2">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <order-cell
            v-for="item in relults"
            :key="item.id"
            :item="item"
            @valueChange="orderCellChange"
          >
            <template #goods>
              <van-card
                v-for="goodsitem in item.orderItemList"
                :key="goodsitem.id"
                :num="goodsitem.productQuantity"
                :price="formatMoney(goodsitem.productPrice)"
                :title="goodsitem.productName"
                :thumb="goodsitem.productPic"
              >
                <template #tags>
                  <van-tag plain type="warning">{{goodsitem.productAttr}}</van-tag>
                </template>
              </van-card>
            </template>
            <template #footer>
              <div v-if="item.status==2">
                <van-button size="mini" v-if="item.deliveryType ==0">查看物流</van-button>
                <van-button size="mini" v-else-if="item.deliveryType ==1">备货完成</van-button>
                <van-button size="mini" v-else-if="item.deliveryType ==2">查询状态</van-button>
                <van-button size="mini" v-else-if="item.deliveryType ==3">查询状态</van-button>
              </div>
            </template>
            <template #tags>
              <van-tag plain type="danger" v-if="item.deliveryType ==0">物流配送</van-tag>
              <van-tag plain type="danger" v-if="item.deliveryType ==1">上门自提</van-tag>
              <van-tag plain type="danger" v-if="item.deliveryType ==2">自提点自提</van-tag>
              <van-tag plain type="danger" v-if="item.deliveryType ==3">骑手派送</van-tag>
            </template>
          </order-cell>
        </van-list>
      </van-tab>
      <van-tab title="已完成" name="3">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <order-cell
            v-for="item in relults"
            :key="item.id"
            :item="item"
            @valueChange="orderCellChange"
          >
            <template #goods>
              <van-card
                v-for="goodsitem in item.orderItemList"
                :key="goodsitem.id"
                :num="goodsitem.productQuantity"
                :price="formatMoney(goodsitem.productPrice)"
                :title="goodsitem.productName"
                :thumb="goodsitem.productPic"
              >
                <template #tags>
          
                  <van-tag plain type="warning">{{goodsitem.productAttr}}</van-tag>
                </template>
              </van-card>
            </template>
          </order-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import orderCell from "./components/orderCell";
import { productOrderList, productOrderDelivery } from "@/api/product";
export default {
  components: {
    orderCell
  },

  data() {
    return {
      active: "0",
      relults: [],
      loading: false,
      finished: false,
      refreshing: false,

      param: {
        status: "1",
        pageSize: 10,
        pageNum: 1
      }
    };
  },
  methods: {
    formatMoney(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
    onLoad() {
      if (this.refreshing) {
        this.relults = [];
        this.param.pageNum = 1;
        this.refreshing = false;
      }

      productOrderList(this.param).then(response => {
        this.relults = this.relults.concat(response.data);
        if (response.data.length == 0) {
          this.finished = true;
        }
        this.param.pageNum = this.param.pageNum + 1;
        this.loading = false;
      });
    },
    orderCellChange() {
      this.relults = [];
      this.finished = false;
      this.loading = true;
      this.param.pageNum = 1;
      this.onLoad();
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    onClick() {
      this.relults = [];
      this.finished = false;
      this.loading = true;
      this.param.pageNum = 1;
      this.onLoad();
    },
    onCellClick(id){
      this.$router.push({path:'/order/orderDef',query:{id:id}});
    }
  }
};
</script>